<template> 
    <div class="mui-content commentInput">
        <div class="pa-10">
            <div id="segmentedControl" class="mui-segmented-control" v-if="nameReport.length>0">
                <a href="#item1" class="mui-control-item mui-active">查看全部</a>
                <a href="#item2" class="mui-control-item ">只查看问题项</a>
            </div>
            <div class="mui-content orderCancel" v-if="nameReport.length == 0">
                检测报告出现问题，请咨询客服
            </div>
        </div>
        <div class="mui-content">
            <div id="item1" class="mui-control-content mui-active">  
                <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted ">
                    <template v-for="(index,item) in nameReport" >
                         <a href="#show{{index}}" class="mui-control-item " :class="{'mui-active':index==0}">{{item}}</a>
                     </template>    
                </div>
                <template v-for="(index,item) in valueReport">
                    <div id="show{{index}}" class="mui-control-content " :class="{'mui-active':index==0}">
                        <ul class="mui-table-view"> 
                            <li class="mui-table-view-cell">
                                <span class="col-4 mui-text-center">检测项目</span>
                                <span class="col-8 mui-text-center">检查结果</span>
                            </li>
                            <li class="mui-table-view-cell" v-for="value in item">
                                <span class="col-4 mui-text-center">{{value.bgxmName}}</span>
                                <span class="col-8 mui-text-center" v-show="value.bgxmValue==0"><i class="iconfont" style="color:#66cc00;">&#xe6b8;</i>&nbsp;&nbsp;正常</span>
                                <span class="col-8 mui-text-center" v-show="value.bgxmValue==1"><i class="iconfont" style="color:#f1b519;">&#xe67f;</i>&nbsp;&nbsp;建议进场检查</span>
                                <span class="col-8 mui-text-center" v-show="value.bgxmValue==2"><i class="iconfont" style="color:#d81f07;">&#xe6b7;</i>&nbsp;&nbsp;急需维修或更换</span>
                            </li>
                        </ul>    
                     </div>
                </template>    
            </div>
            <div id="item2" class="mui-control-content">
                
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell">
                            <span class="col-4 mui-text-center">检测项目</span>
                            <span class="col-8 mui-text-center">检查结果</span>
                        </li>
                        <template v-for="item in allReport">
                            <li class="mui-table-view-cell" v-show="item.bgxmValue!=0">
                                <span class="col-4 mui-text-center">{{item.bgxmName}}</span>
                                <span class="col-8 mui-text-center" v-show="item.bgxmValue==1"><i class="iconfont" style="color:#f1b519;">&#xe67f;</i>&nbsp;&nbsp;建议进场检查</span>
                                <span class="col-8 mui-text-center" v-show="item.bgxmValue==2"><i class="iconfont" style="color:#d81f07;">&#xe6b7;</i>&nbsp;&nbsp;急需维修或更换</span>
                            </li>
                        </template>
                    </ul>
                
            </div>
        </div>
        
    </div>
</template>
<style>
  .pa-10{padding: 10px;}
</style>

<script type="text/ecmascript-6">
        import '../../fonts/mui.css';
        import Page from '../../base/Page'
        import { API } from '../../config/constants'
        export default new Page({
            data(){
                return{
                    order:{},
                    mgClass:true,
                    allReport:[],
                    nameReport:[],
                    valueReport:[]
                }
            },
            ready () {
                let that = this;
                this.getJSON(API.GET_REPORT, {orderCode:this.$route.params.id}, res => {
                    
                    res.resultData.typeList.forEach(function(item){
                        
                        that.nameReport.push(item.typeName)
                        that.valueReport.push(item.list)
                        item.list.forEach(function(value){
                            that.allReport.push(value)
                        });
                    });
                    console.log(this.allReport);
                    console.log(this.nameReport);
                    console.log(this.valueReport);
                });

            },
            components:{
            },
            methods:{
                
            },
    });

</script>